<template>
    <div id="address">

        <!-- 新增地址 -->
        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="联系人"
                label="联系人"
                placeholder="姓名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="mobile"
                type="mobile"
                name="手机号码"
                label="手机号码"
                placeholder="11位手机号"
                :rules="[
                    { required: true, message: '请填写手机号' },
                    { pattern:/^[1][3,5,6,7,8,9][0-9]{9}$/,message:'请你输入正确的手机号'}
                ]"
            />
            <van-field 
                readonly
                clickable
                name="picker"
                :value="value"
                label="选择器"
                placeholder="点击选择城市"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
            </van-popup>
            <div style="margin: 16px;">
                <van-button block color="linear-gradient(to right, #80C125, #1DAD19)" native-type="submit">
                    保存
                </van-button>
            </div>
        </van-form>
  
    </div>
</template> 

<script>
export default {
    data() {
        return {
            username:"",
            mobile:"",
            value: '',
            columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            showPicker: false,
        }
    },
    mounted() {
        this.list = JSON.parse(localStorage.getItem("list")) || [];
    },
    methods: {
        // 添加地址 保存
        onSubmit(){
            this.list.push({
                username:this.username,
                mobile:this.mobile,
                value:this.value,
            });
            // 清空
            this.username = "";
            this.mobile = "";
            this.value = "";
            // 本地存储
            localStorage.setItem("list",JSON.stringify(this.list));
        },
        onConfirm(value) {
            console.log(value);
            this.value = value;
            this.showPicker = false;
        },
    },
}
</script>

<style lang="scss">
#address{
    font-size: 0.3rem;
}
</style>